<template>
<div class="app-container">
  <!--查询条件表单-->
  <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="年级" prop="gradeId">
      <el-select v-model="queryParams.gradeId" @change="queryGradeChangeHandle" placeholder="年级" clearable>
        <el-option v-for="item in gradeOptions" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId" />
      </el-select>
    </el-form-item>
    <el-form-item label="班级" prop="clazzId">
      <el-select v-model="queryParams.clazzId" placeholder="班级" clearable>
        <el-option v-for="item in clazzOptions" :key="item.clazzId" :label="item.clazzName" :value="item.clazzId" />
      </el-select>
    </el-form-item>
    <el-form-item label="考试" prop="examId">
      <el-select v-model="queryParams.examId"  clearable placeholder="请选择">
        <el-option
            v-for="item in examOptions"
            :key="item.examId"
            :label="item.examCombinationName"
            :value="item.examId"
            :disabled="item.status == 0"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <el-button type="success" icon="Printer" @click="handlePrinter">打印</el-button>
      <el-button type="warning" icon="Download" @click="handleDownload">导出</el-button>
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <el-row :gutter="20">
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header">
          <el-tag>年级平均分{{ gradeAvgScoreSum }}</el-tag>
        </div>
        <div class="my-card-content-number">{{ avgScoreSum }}</div>
        <div class="my-card-content-label"><el-icon color="#409EFF" :size="32"><Odometer /></el-icon>平均分</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header"></div>
        <div class="my-card-content-number">{{ maxScoreSum }}</div>
        <div class="my-card-content-label"><el-icon color="#67C23A" :size="32"><Top /></el-icon>最高分</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header"></div>
        <div class="my-card-content-number">{{ minScoreSum }}</div>
        <div class="my-card-content-label"><el-icon color="#F56C6C" :size="32"><Bottom /></el-icon>最低分</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header"></div>
        <div class="my-card-content-number">{{excellentRate}}%</div>
        <div class="my-card-content-label"><el-icon color="#E6A23C" :size="32"><Sunny /></el-icon>优秀率</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header"></div>
        <div class="my-card-content-number">{{commonRate}}%</div>
        <div class="my-card-content-label"><el-icon color="#909399" :size="32"><Moon /></el-icon>合格率</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="always" class="my-card-content">
        <div class="my-card-content-header"></div>
        <div class="my-card-content-number">{{ currentLocation }}/{{ clazzCount }}</div>
        <div class="my-card-content-label"><el-icon color="#8A2BE2" :size="32"><Histogram /></el-icon>班级排名</div>
      </el-card>
    </el-col>
  </el-row>

  <el-divider/>
  <el-row>
    <el-col :span="12">
      <div ref="avgScoreLineStats" style="height: 420px" />
    </el-col>
    <el-col :span="12">
      <div ref="avgScoreBarStats" style="height: 420px" />
    </el-col>
  </el-row>

  <el-divider/>

  <el-row>
    <el-col :span="24">
      <el-tabs tab-position="left" style="height: 420px" class="demo-tabs" v-model="activeName">
        <el-tab-pane label="学科成绩对比" name="1">
          <el-table :data="courseAggregationDataList" >
            <el-table-column label="学科" align="center" prop="courseName" />
            <el-table-column label="实考人数" align="center" prop="studentCount" />
            <el-table-column label="缺考人数" align="center" prop="clazzStudentNotExamCount" />
            <el-table-column label="满分" align="center" prop="courseScore" />
            <el-table-column label="最高分" align="center" prop="maxScore" />
            <el-table-column label="最低分" align="center" prop="minScore" />
            <el-table-column label="平均分" align="center" prop="avgScore" />
            <el-table-column label="排名" align="center" prop="ranking" />
            <el-table-column label="优秀率" align="center" prop="outstandingRate" >
              <template #default="scope">
                <span>{{scope.row.outstandingRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="良好率" align="center" prop="goodRate">
              <template #default="scope">
                <span>{{scope.row.goodRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="一般率" align="center" prop="commonRate" >
              <template #default="scope">
                <span>{{scope.row.commonRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="合格率" align="center" prop="passRate" >
              <template #default="scope">
                <span>{{scope.row.passRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="低分率" align="center" prop="failRate" >
              <template #default="scope">
                <span>{{scope.row.failRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="标准差" align="center" prop="stdDevSamp" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="平均分对比" name="2">
          <div ref="avgCourseScoreBarStats" :id="'avgCourseScoreBarStatsTest'" style="height: 420px" />
        </el-tab-pane>
        <el-tab-pane label="学业等级分布" name="3">
          <el-row>
            <el-col :span="12">
              <div ref="courseDegreeStackBarStats" :id="'courseDegreeStackBarStatsTest'" style="height: 420px" />
            </el-col>
            <el-col :span="12">
              <div ref="courseDegreeStackLineStats" :id="'courseDegreeStackLineStatsTest'" style="height: 420px" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="成绩分段对比" name="4">
          <div ref="courseScoreSumRectStats" style="height: 420px" />
        </el-tab-pane>
        <el-tab-pane label="优劣势学科对比" name="5">
          <el-row>
            <el-col :span="12">
              <div ref="radarChartStats" style="height: 420px" />
            </el-col>
            <el-col :span="12">
                <div class="custom-card">
                   <div class="custom-card-header custom-color-success">优势学科</div>
                   <div class="custom-card-content">{{ advantageCourse }}</div>
                </div>
                <br/>
                <div class="custom-card">
                  <div class="custom-card-header custom-color-danger">劣势学科</div>
                  <div class="custom-card-content">{{ inferiorityCourse }}</div>
                </div>
              <br/>
              <div class="custom-card">
                <div class="custom-card-content" style="height: 112px">
                  优劣势学科：计算班级学生考试学科平均分除以学科满分大于0.8的为优势学科，小于0.8的为劣势学科
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="24">
      <div ref="clazzPhysicalScoreLineStats" style="height: 420px" />
    </el-col>
  </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="24">
      <div ref="clazzPhysicalScoreBarStats" style="height: 420px" />
    </el-col>
  </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="12">
      <div ref="clazzPhysicalScorePieStats" style="height: 420px" />
    </el-col>
    <el-col :span="12">
      <div ref="clazzPhysicalScoreRectStats" style="height: 420px" />
    </el-col>
  </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="24">
      <div class="el-table el-table--enable-row-hover el-table--medium el-table--border">
        <table class="el-table__body" cellspacing="0" style="width: 100%" v-if="tableData.length > 0">
          <thead>
          <tr class="el-table__row">
            <template v-for="(item, index) in tableData[0]">
              <td style="text-align: center" class="el-table__cell" v-if="index == 0" rowspan="2"><b>{{item}}</b></td>
              <td style="text-align: center" class="el-table__cell" v-else colspan="2"><b>{{item}}</b></td>
            </template>
          </tr>
          <tr class="el-table__row">
            <template v-for="(item, index) in tableData[1]">
              <td style="text-align: center" class="el-table__cell"><b>{{item}}</b></td>
            </template>
          </tr>
          </thead>
          <tbody>
          <template v-for="(item, index) in tableData">
            <tr class="el-table__row" v-if="index > 1">
              <template v-for="subItem in item">
                <td style="text-align: center" class="el-table__cell" v-html="subItem"></td>
              </template>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </el-col>
  </el-row>
  <el-divider/>
    <el-row>
      <el-col :span="24">
        <div ref="clazzPhysicalScoreWordCloudStats" id="clazzPhysicalScoreStats" style="height: 500px" />
      </el-col>
    </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="24">
      <div ref="clazzPhysicalScoreStackLineStats" style="height: 420px" />
    </el-col>
  </el-row>
  <el-divider/>
  <el-row>
    <el-col :span="24">
      <div ref="clazzPhysicalScoreStackBarStats" style="height: 420px" />
    </el-col>
  </el-row>

</div>
</template>

<script setup name="ClazzScoreAnalysis">
import {getCurrentInstance, nextTick, reactive, ref, toRefs, watch} from "vue";
import * as publicApi from "@/api/school/publicApi";
import * as clazzScoreApi from "@/api/analysis/clazzScoreApi";
import * as echarts from "echarts";
import 'echarts-wordcloud';
import {Bottom, Histogram, Moon, Sunny} from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance();

const clazzPhysicalScoreLineStats = ref(null);
const clazzPhysicalScoreLineStatsInstance = ref(null);

const clazzPhysicalScoreBarStats = ref(null);
const clazzPhysicalScoreBarStatsInstance =ref(null);

const clazzPhysicalScorePieStats = ref(null);
const clazzPhysicalScorePieStatsInstance = ref(null);

const clazzPhysicalScoreRectStats = ref(null);
const clazzPhysicalScoreRectStatsInstance =ref(null);

const clazzPhysicalScoreStackLineStats = ref(null);
const clazzPhysicalScoreStackLineStatsInstance = ref(null);

const clazzPhysicalScoreStackBarStats = ref(null);
const clazzPhysicalScoreStackBarStatsInstance =ref(null);

const clazzPhysicalScoreWordCloudStats = ref(null);
const clazzPhysicalScoreWordCloudStatsInstance = ref(null);

const avgScoreLineStats = ref(null);
const avgScoreLineStatsInstance = ref(null);

const avgScoreBarStats = ref(null);
const avgScoreBarStatsInstance =ref(null);

const avgCourseScoreBarStats = ref(null);
const avgCourseScoreBarStatsInstance =ref(null);

const courseDegreeStackBarStats = ref(null);
const courseDegreeStackBarStatsInstance = ref(null);

const courseDegreeStackLineStats = ref(null);
const courseDegreeStackLineStatsInstance = ref(null);

const courseScoreSumRectStats = ref(null);
const courseScoreSumRectStatsInstance = ref(null);

const radarChartStats = ref(null);
const radarChartStatsInstance = ref(null);

const tableData = ref([])

const data = reactive({
  queryParams: {
    gradeId: undefined,
    clazzId: undefined,
    examId: undefined
  }
})

const { queryParams } = toRefs(data)


/** 查询表单相关变量 */
const showSearch = ref(true);
const loading = ref(true);
const gradeOptions = ref([]);
const clazzOptions = ref([]);
const examOptions = ref([]);
/** 年级列表 */
publicApi.allGradeList().then((response) => {
  gradeOptions.value = response
})
/** 考试列表 */
publicApi.allExamList().then((response) => {
  examOptions.value = response
})

/** 扩展部分 */
const avgScoreSum = ref(0);
const maxScoreSum = ref(0);
const minScoreSum = ref(0);
const excellentRate = ref(0);
const commonRate = ref(0);
const currentLocation = ref(0);
const clazzCount = ref(0);
const gradeAvgScoreSum = ref(0);
const courseAggregationDataList = ref([]);
const activeName = ref("1");

const advantageCourse = ref("无");
const inferiorityCourse = ref("无");


function queryGradeChangeHandle(gradeId) {
  console.log(gradeId)
  data.queryParams.clazzId = undefined
}

watch(
    () => data.queryParams.gradeId,
    (newValue, oldValue) => {
      console.log("newValue",newValue, "oldvalue", oldValue);
      if (newValue === undefined || newValue === null || newValue === "") {
        data.queryParams.clazzId = undefined
        clazzOptions.value = []
      } else {
        publicApi.allClazzList({gradeId : newValue}).then((response) => {
          clazzOptions.value = response
        })
      }
    }
);

function getList() {
  loading.value = true;
  clazzScoreApi
      .listEchartsData(queryParams.value)
      .then((response) => {
        avgLineChartBuild(response)
        avgBarChartBuild(response)
        avgCourseBarChartBuild(response)
        lineChartBuild(response)
        barChartBuild(response)
        pieChartBuild(response)
        rectChartBuild(response)
        sumRectChartBuild(response)
        stackLineChartBuild(response)
        degreeStackLineChartBuild(response)
        stackBarChartBuild(response)
        degreeStackBarChartBuild(response)
        wordCloudChartBuild(response)
        radarChartBuild(response)
        tableData.value = response.tableData
        courseAggregationDataList.value = response.courseAggregationDataList
        extendData(response)
      })
      .finally(() => {
        loading.value = false;
      });
}

/** 搜索 */
function handleQuery() {
  getList()
}

/** 打印 */
function handlePrinter() {
  proxy.download("/analysis/clazz_score/pdf_list", queryParams.value, "班级考试成绩.pdf")
}

/** 导出 */

function handleDownload() {
  proxy.download("/analysis/clazz_score/excel_list", queryParams.value, "班级考试成绩.xlsx")
}

/** 重置搜索条件 */
function resetQuery() {

}

function extendData(response) {
  let data =  response.clazzAggregationData;
  avgScoreSum.value = data.avgScoreSum;
  maxScoreSum.value = data.maxScoreSum;
  minScoreSum.value = data.minScoreSum;
  excellentRate.value = response.excellentRate;
  commonRate.value = response.commonRate;
  currentLocation.value = response.currentLocation;
  clazzCount.value = response.clazzCount;
  gradeAvgScoreSum.value = response.gradeAvgScoreSum;
}

function radarChartBuild(response) {
  advantageCourse.value = "无";
  inferiorityCourse.value = "无";
  let gradeClazzName = response.gradeInfo.gradeName + response.clazzInfo.clazzName;
  let courseAggregationDataList = response.courseAggregationDataList;
  let indicatorData = [];
  let gradeData = [];
  let clazzData = [];
  let advantageArray = [];
  let inferiorityArray = [];
  courseAggregationDataList.forEach(function (item, index) {
    if (index === courseAggregationDataList.length -1) return
    indicatorData.push({
      name : item.courseName,
      max : 1
    });
    gradeData.push(item.gradeRankingCalc);
    clazzData.push(item.rankingCalc);
    if (item.rankingCalc >= 0.8) {
      advantageArray.push(item.courseName);
    } else {
      inferiorityArray.push(item.courseName);
    }
  })
  if (advantageArray.length > 0) {
    advantageCourse.value = advantageArray.join("、")
  }

  if (inferiorityArray.length > 0) {
    inferiorityCourse.value = inferiorityArray.join("、")
  }
  const clazzPhysicalScoreStatsInstance = echarts.init(radarChartStats.value, 'macarons');
  let option = {
    title: {
      text: '优劣势学科对比'
    },
    legend: {
      data: ['年级', gradeClazzName]
    },
    radar: {
      shape: 'circle',
      indicator: indicatorData
    },
    series: [
      {
        name: `年级 vs ${gradeClazzName}`,
        type: 'radar',
        label: {
          show: true
        },
        areaStyle:{},
        data: [
          {
            value: gradeData,
            name: '年级'
          },
          {
            value: clazzData,
            name: gradeClazzName
          }
        ]
      }
    ]
  };
  clazzPhysicalScoreStatsInstance.setOption(option);
  radarChartStatsInstance.value = clazzPhysicalScoreStatsInstance
}


function lineChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreLineStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesLineList
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreLineStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function avgLineChartBuild(response) {
  const avgScoreStatsInstance = echarts.init(avgScoreLineStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.avgObjListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.avgSeriesLineList
  }
  avgScoreStatsInstance.setOption(option);
  avgScoreLineStatsInstance.value = avgScoreStatsInstance
}

//构造柱状图
function barChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreBarStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesBarList
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreBarStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function avgBarChartBuild(response) {
  const avgScoreStatsInstance = echarts.init(avgScoreBarStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.avgObjListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.avgSeriesBarList
  }
  avgScoreStatsInstance.setOption(option);
  avgScoreBarStatsInstance.value = avgScoreStatsInstance
}

function avgCourseBarChartBuild(response) {
  const avgCourseScoreStatsInstance = echarts.init(avgCourseScoreBarStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.avgCourseObjListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.avgCourseSeriesBarList
  }
  avgCourseScoreStatsInstance.setOption(option);
  avgCourseScoreBarStatsInstance.value = avgCourseScoreStatsInstance
}


//构造饼图
function pieChartBuild( response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScorePieStats.value, 'macarons');
  let option = {
    title: {
      text: '课程成绩等级分布饼图',
      // subtext: '分数划分区域',
      left: 'center'
      // bottom: '5%'
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      right: 20,
      top: 10,
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '分数区间',
        type: 'pie',
        radius: '50%',
        data:  response.pieDataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: '{b} : {c} ({d}%)'
            },
            labelLine: {
              show: true
            }
          }
        }
      }
    ]
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScorePieStatsInstance.value = clazzPhysicalScoreStatsInstance
}


//构造直方图
function rectChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreRectStats.value, 'macarons');

  let mylinedata = []
  for (let i = 0; i < response.histogramData.length; i++) {
    mylinedata.push(response.histogramData[i][2])
  }
  let mydata = response.histogramData.map(function (item, index) {
    return {
      value: item,
      itemStyle: {
        // color: '#9bbb59'
      }
    }
  })

  function renderItem (params, api) {
    let yValue = api.value(2)
    let start = api.coord([api.value(0), yValue])
    let size = api.size([api.value(1) - api.value(0), yValue])
    let style = api.style()

    return {
      type: 'rect',
      shape: {
        x: start[0],
        y: start[1],
        width: size[0],
        height: size[1]
      },
      style: style
    }
  }

  let option = {
    title: {
      text: '课程成绩得分统计直方图',
      left: 'center'
    },
    tooltip: {},
    xAxis: [{
      scale: true,
      type: 'value',
      min: 0,
      max: response.fullScore,
      interval: 10
    }, {
      type: 'category',
      show: false,
      data: response.lineTitleArray
    }],
    yAxis: {},
    series: [{
      type: 'custom',
      renderItem: renderItem,
      label: {
        show: true,
        position: 'top'
      },
      dimensions: ['from', 'to', '人数'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      data: mydata
    }, {
      type: 'line',
      smooth: true,
      xAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#275F82', // 改变折线点的颜色
          lineStyle: {
            color: '#253A5D' // 改变折线颜色
          }
        }
      },
      data: mylinedata
    }]
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreRectStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function sumRectChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(courseScoreSumRectStats.value, 'macarons');

  let mylinedata = []
  for (let i = 0; i < response.histogramDataSum.length; i++) {
    mylinedata.push(response.histogramDataSum[i][2])
  }
  let mydata = response.histogramDataSum.map(function (item, index) {
    return {
      value: item,
      itemStyle: {
        // color: '#9bbb59'
      }
    }
  })

  function renderItem (params, api) {
    let yValue = api.value(2)
    let start = api.coord([api.value(0), yValue])
    let size = api.size([api.value(1) - api.value(0), yValue])
    let style = api.style()

    return {
      type: 'rect',
      shape: {
        x: start[0],
        y: start[1],
        width: size[0],
        height: size[1]
      },
      style: style
    }
  }

  let option = {
    title: {
      text: '成绩分段对比',
      left: 'center'
    },
    tooltip: {},
    xAxis: [{
      scale: true,
      type: 'value',
      min: 0,
      max: response.fullScoreSum,
      interval: 50
    }, {
      type: 'category',
      show: false,
      data: response.lineTitleArraySum
    }],
    yAxis: {},
    series: [{
      type: 'custom',
      renderItem: renderItem,
      label: {
        show: true,
        position: 'top'
      },
      dimensions: ['from', 'to', '人数'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      data: mydata
    }, {
      type: 'line',
      smooth: true,
      xAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#275F82', // 改变折线点的颜色
          lineStyle: {
            color: '#253A5D' // 改变折线颜色
          }
        }
      },
      data: mylinedata
    }]
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  courseScoreSumRectStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function stackLineChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreStackLineStats.value, 'macarons');
  let objData = response.objListList;
  let title = []
  for (let i = 0; i < objData.length-1; i++) {
    title.push(objData[i+1][0])
  }
  let legendData = []
  for (let j = 0; j < objData[0].length - 1; j++) {
    legendData.push(objData[0][j+1])
  }
  let seriesData = []
  for (let i = 0; i < objData[0].length-1; i++) {
    let obj = {
      name: objData[0][i+1],
      type: 'line',
      stack: 'total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: []
    }
    for (let j = 0; j < objData.length - 1; j++) {
      obj.data.push(objData[j + 1][i + 1])
    }
    seriesData.push(obj)
  }

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: title,
      boundaryGap: false,
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    series: seriesData
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreStackLineStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function degreeStackLineChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(courseDegreeStackLineStats.value, 'macarons');
  let objData = response.courseDegreeObjListList;
  let title = []
  for (let i = 0; i < objData.length-1; i++) {
    title.push(objData[i+1][0])
  }
  let legendData = []
  for (let j = 0; j < objData[0].length - 1; j++) {
    legendData.push(objData[0][j+1])
  }
  let seriesData = []
  for (let i = 0; i < objData[0].length-1; i++) {
    let obj = {
      name: objData[0][i+1],
      type: 'line',
      stack: 'total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: []
    }
    for (let j = 0; j < objData.length - 1; j++) {
      obj.data.push(objData[j + 1][i + 1])
    }
    seriesData.push(obj)
  }

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: title,
      boundaryGap: false,
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    series: seriesData
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  courseDegreeStackLineStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function stackBarChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreStackBarStats.value, 'macarons');
  let objData = response.objListList;
  let title = []
  for (let i = 0; i < objData.length-1; i++) {
    title.push(objData[i+1][0])
  }
  let legendData = []
  for (let j = 0; j < objData[0].length - 1; j++) {
    legendData.push(objData[0][j+1])
  }
  let seriesData = []
  for (let i = 0; i < objData[0].length-1; i++) {
    let obj = {
      name:  objData[0][i+1],
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
    for (let j = 0; j < objData.length - 1; j++) {
      obj.data.push(objData[j + 1][i + 1])
    }
    seriesData.push(obj)
  }

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: title,
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    series: seriesData
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreStackBarStatsInstance.value = clazzPhysicalScoreStatsInstance

}

function degreeStackBarChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(courseDegreeStackBarStats.value, 'macarons');
  let objData = response.courseDegreeObjListList;
  let title = []
  for (let i = 0; i < objData.length-1; i++) {
    title.push(objData[i+1][0])
  }
  let legendData = []
  for (let j = 0; j < objData[0].length - 1; j++) {
    legendData.push(objData[0][j+1])
  }
  let seriesData = []
  for (let i = 0; i < objData[0].length-1; i++) {
    let obj = {
      name:  objData[0][i+1],
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
    for (let j = 0; j < objData.length - 1; j++) {
      obj.data.push(objData[j + 1][i + 1])
    }
    seriesData.push(obj)
  }

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: title,
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    series: seriesData
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  courseDegreeStackBarStatsInstance.value = clazzPhysicalScoreStatsInstance
}

function wordCloudChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(document.getElementById('clazzPhysicalScoreStats'), 'macarons');
  let option = {
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'wordCloud',
        data: response.wordDataList,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          // Color can be a callback function or a color string
          color: function () {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          focus: 'self',

          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        //shape: 'circle', // 词云图显示排列为什么形状，默认 circle，cardioid 心形，diamond 菱形
        // textStyle: {
        //   normal: {
        //     fontFamily: 'sans-serif',
        //     fontWeight: 'bold',
        //     color: function () {
        //       // 随即配色，每次刷新页面都会显示不同颜色
        //       return (
        //           'rgb(' +
        //           [
        //             Math.round(Math.random() * 160),
        //             Math.round(Math.random() * 160),
        //             Math.round(Math.random() * 160)
        //           ].join(',') +
        //           ')'
        //       )
        //     }
        //   }
        // },
        // emphasis: {
        //   focus: 'self',
        //   textStyle: {
        //     textShadowBlur: 10,
        //     textShadowColor: '#333'
        //   }
        // }
      }
    ]
  };
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreWordCloudStatsInstance.value = clazzPhysicalScoreStatsInstance
}

watch(activeName , (newValue, oldValue) => {
  if (newValue === '2') {
    console.log("平均分对比")
    nextTick(() => {
      avgCourseScoreBarStatsInstance.value.resize()
    })
  } else if (newValue === '3') {
    console.log("学业等级对比")
    nextTick(() => {
      courseDegreeStackBarStatsInstance.value.resize()
      courseDegreeStackLineStatsInstance.value.resize()
    })
  } else if (newValue === '4') {
    console.log("成绩分段对比")
    nextTick( () => {
      courseScoreSumRectStatsInstance.value.resize()
    })
  } else if (newValue === '5') {
    console.log("优劣势学科对比")
    nextTick(() => {
      radarChartStatsInstance.value.resize()
    })
  }
})


</script>

<style lang="scss" scoped>
.my-card-content {
  text-align: center;
  .my-card-content-header{
    height: 24px;
  }
  .my-card-content-number {
    font-size: 56px;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 5px;
  }
  .my-card-content-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    .el-icon {
      margin-right: 3px;
    }
  }
}

.custom-card {
  display: flex;
  .custom-card-header{
    writing-mode: vertical-rl;
    padding: 16px;
    font-size: 20px;
    color: white;
  }
  .custom-color-success {
    background: #30bb8f;
  }

  .custom-color-danger {
    background: #f96868;
  }
  .custom-card-content{
    background: whitesmoke;
    padding: 16px;
    width: 100%;
    display:flex; //弹性布局
    //justify-content:center; //子元素相对父元素水平（主轴）居中
    align-items:center; //子元素相对父元素垂直（交叉轴）居中
  }
}
</style>
